<script setup lang="ts" name="bill-index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from "echarts";
import type { TabsPaneContext } from "element-plus";
import a1 from "@/assets/image/a1.jpg";

// 表格数据
const tableData = [
  {
    paixu: "1",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: a1,
  },
  {
    paixu: "2",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "3",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "4",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "5",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "6",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "7",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "8",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "9",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
  {
    paixu: "10",
    daili: "泓洋",
    caizhi: "Q195",
    huoming: "卷板",
    fahuo: "安丰",
    shouhuo: "物产中大金属",
    hetong: "AFRJ220816061T",
    daogang: "10272",
    juangang: "AF222097422",
    guige: "3.0*1270",
    dunshu: "22.08",
    jianshu: "1",
    duowei: "1区7",
    banci: "丙（白）",
    jigang: "2022/9/1",
    beizhu: "",
    yuanduo: "",
    daoduo: "",
    daoduoriqi: "",
    chuanming: "",
    liuxiang: "",
    xuhao: "",
    biaoji: "",
    yuantu: "",
  },
];
// 查看原图
const dialogTableVisible = ref(false);
const handleClick = () => {
  console.log("index");
};

// 搜索内容
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const value1 = ref("");
</script>

<template>
  <div class="bill-box">
    <div>
    <el-row :gutter="20" class="input-row">
      <el-col :span="4"
        ><el-input v-model="input1" placeholder="请输入代理"
      /></el-col>
      <el-col :span="4"
        ><el-input v-model="input2" placeholder="请输入货名"
      /></el-col>
      <el-col :span="4">
        <el-date-picker v-model="value1" type="date" placeholder="选择时间" />
      </el-col>
      <el-col :span="12">
        <el-button type="primary" plain>搜索</el-button>
        <el-button type="success" plain>重置</el-button>
        <el-button type="warning" plain>导出</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column type="selection" width="55" />
      <el-table-column prop="paixu" label="排序" width="60" />
      <el-table-column prop="daili" label="代理" width="100" />
      <el-table-column prop="caizhi" label="材质" width="100" />
      <el-table-column prop="huoming" label="货名" width="100" />
      <el-table-column prop="fahuo" label="发货单位" width="100" />
      <el-table-column prop="shouhuo" label="收货单位" width="100" />
      <el-table-column prop="hetong" label="合同号" width="100" />
      <el-table-column prop="daogang" label="到港车号" width="100" />
      <el-table-column prop="juangang" label="卷钢号" width="100" />
      <el-table-column prop="guige" label="规格" width="100" />
      <el-table-column prop="dunshu" label="吨数" width="100" />
      <el-table-column prop="jianshu" label="件数" width="100" />
      <el-table-column prop="duowei" label="垛位" width="100" />
      <el-table-column prop="banci" label="班次" width="100" />
      <el-table-column prop="jigang" label="集港日期" width="100" />
      <el-table-column prop="beizhu" label="备注" width="100" />
      <el-table-column prop="yuanduo" label="原垛" width="100" />
      <el-table-column prop="daoduo" label="倒垛班次" width="100" />
      <el-table-column prop="daoduoriqi" label="倒垛日期" width="100" />
      <el-table-column prop="chuanming" label="船名" width="100" />
      <el-table-column prop="liuxiang" label="流向" width="100" />
      <el-table-column prop="xuhao" label="序号" width="100" />
      <el-table-column prop="biaoji" label="标记" width="100" />
      <el-table-column fixed="right" label="查看原图" width="120">
        <template #default>
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick, (dialogTableVisible = true)"
            >查看原图</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 原图弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="原图" width="840px">
      <img :src="a1" alt="" style="width: 800px" />
    </el-dialog>
    </div>
    <div class="pagination-box">
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.bill-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(12, 12, 12);

  .input-row {
    padding: 15px 0 15px 0;
  }

  .pagination-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-content: center;
  }
}
</style>
